<template>
	<view class="bigBox">
		<view class="content"
			><view class="title">申请详情</view>
			<view
				class="detailed"
				v-for="(item, index) in applyParticulars"
				:key="index"
			>
				<view class="detailed_content">
					<view class="detailed_content_title">医院：</view>
					<view class="content_item">{{ item.orgName }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">科室：</view>
					<view class="content_item">{{ item.deptName }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">申请名称：</view>
					<view class="content_item">{{ item.formName }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">申请类型：</view>
					<view class="content_item">{{ item.formType }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">申请日期：</view>
					<view class="content_item">{{ item.applyDate.split(' ')[0] }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">操作日期：</view>
					<view class="content_item">{{
						rTime(item.createAt).split(' ')[0]
					}}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">申请时间段：</view>
					<view class="content_item">{{ item.timeSlot }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">班次：</view>
					<view class="content_item">{{
						item.shift == 'A'
							? '上午'
							: item.shift == 'P'
							? '下午'
							: item.shift == 'F'
							? '全天'
							: '夜间'
					}}</view>
				</view>

				<!-- 0显示撤销
				1是退费
				为空不显示 -->
				<view style="padding: 40rpx; margin-top: 20rpx">
					<u-button
						type="error"
						:plain="true"
						v-if="
							item.chargeFlag && item.chargeFlag != 2 && item.chargeFlag != 3
						"
						@click="btnClick"
						>{{
							item.chargeFlag == '0'
								? '撤销'
								: item.chargeFlag == '1'
								? '退费'
								: ''
						}}</u-button
					>
				</view>
			</view>
			<view class="safe"></view
		></view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { revokeTest } from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			applyParticulars: [],
			parameterId: '',
		}
	},
	onLoad(option) {
		console.log(JSON.parse(option.parameter))
		let parameter = JSON.parse(option.parameter)
		this.applyParticulars.push(parameter)
		this.parameterId = JSON.parse(option.parameter).id
	},
	computed: {
		...mapState({
			orgCode: state => state.orgCode,
			patientIdentity: state => state.patientIdentity,
			orgId: state => state.orgId,
			curHos: state => state.curHos,
		}),
	},
	methods: {
		rTime(dateTime) {
			let json_date = new Date(dateTime).toJSON()
			return new Date(new Date(json_date) + 8 * 3600 * 1000)
				.toISOString()
				.replace(/T/g, ' ')
				.replace(/\.[\d]{3}Z/, '')
		},
		revokeTestList(id, orgCode, idCard, orgId, orgName) {
			revokeTest({
				id: id,
				orgCode: orgCode,
				idCard: idCard,
				orgId: orgId,
				orgName: orgName,
			}).then(({ data, head }) => {
				if (head.code == 200) {
					this.$refs.uToast.show({
						title: data == '' ? '退费成功' : data,
						type: 'success',
						duration: 1000,
						url: '/pages/chargesApply/index',
					})
				} else {
					this.$refs.uToast.show({
						title: head.msg,
						type: 'error',
					})
				}
			})
		},
		btnClick() {
			this.revokeTestList(
				this.parameterId,
				this.orgCode,
				this.patientIdentity,
				this.orgId,
				this.curHos,
			)
		},
	},
}
</script>

<style lang="scss">
page {
	background: rgb(236, 236, 236);
}
.bigBox {
	width: 100%;
	// padding: 20rpx;

	.content {
		background: #fff;
		// -moz-box-shadow: 2px 2px 5px #9c9c9c;
		// -webkit-box-shadow: 2px 2px 5px #9c9c9c;
		// box-shadow: 2px 2px 5px #9c9c9c;
		text-align: center;
		.title {
			font-size: 18px;
			padding: 10px;
			font-weight: bold;
		}
		.detailed {
			.detailed_content {
				display: flex;
				padding: 20px;
				.content_item {
					font-size: 32rpx;
				}
				.detailed_content_title {
					font-weight: bold;
					font-size: 30rpx;
					text-align: left;
					min-width: 180rpx;
					// margin-right: 100rpx;
				}
			}
		}
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>